<template>
  <view class="page page-primary page-activity-list has-fixed-footer">
    <page-header theme="colorful"></page-header>
    <view class="page-content">
      <!-- 头部卡片 -->
      <page-statistic :data="statisticData"></page-statistic>
      <!-- 搜索框 -->
      <view class="page-search">
        <fui-input v-model="searchValue" borderTop color="#333" radius=16 :borderBottom="false" placeholderStyle="font-size:28rpx" placeholder="请输入活动名称搜索"></fui-input>
        <span class="icon iconfont" @click="searchCenter">&#xe628;</span>
      </view>
      <!-- 页签 -->
      <view class="page-tab">
        <fui-tabs :tabs="tabs" @change="handleChangeTab" background="rgba(0,0,0,0)" size="32" color='#666666' sliderRadius=-1 :center='true' fontWeight='bold' selectedSize='32' selectedColor='var(--fui-color-primary)' scale='1' sliderHeight='8' selectedFontWeight='bold' bottom=3></fui-tabs>
      </view>
      <!-- 列表页 -->
			<view class="activity-list">
				<view class="activity-item" v-for="item in listData" :key="item.id" @click="handleToView(item)">
					<image class="activity-image" :src="item.cover" mode="aspectFill"></image>
					<view class="activity-info">
						<view class="activity-info-titile">{{ item.name }}</view>
						<view class="activity-info-text">
							<fui-text class="activity-info-subtitle" text="活动类型" size="24" color="#999"></fui-text>
							<fui-text :text="ACTIVITY_DISCOUNT_TYPE[item.discountType].name" size="24" color="#333"></fui-text>
						</view>
						<view class="activity-info-text">
							<fui-text class="activity-info-subtitle" text="活动时间" size="24" color="#999"></fui-text>
							<fui-text :text="utils.dateFormatter(item.startTime, 'y/m/d', 2, true)" size="24" color="#333"></fui-text>
							<fui-text text="~" size="24" color="#333"></fui-text>
							<fui-text :text="utils.dateFormatter(item.endTime, 'y/m/d', 2, true)" size="24" color="#333"></fui-text>
						</view>
					</view>
				</view>
			</view>
      <fui-loadmore :state="moreState"></fui-loadmore>
      <view class="ui-fixed-footer">
        <fui-button text="新增" height="78rpx" @click="handleToAdd"></fui-button>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, inject } from 'vue'
import { onShow, onPullDownRefresh, onReachBottom } from "@dcloudio/uni-app"
import { useStore } from 'vuex'
import { ACTIVITY_STATUS, ACTIVITY_DISCOUNT_TYPE } from './consts'
import { formatValue, formatUnit } from '@/utils/tools'
import utils from '@/components/firstui/fui-utils'
import pageHeader from '@/components/header'
import pageStatistic from '@/components/statistic'
import activityApi from '@/api/activity/supplier'

const store = useStore()
const tab = inject('$tab')
const modal = inject('$modal')

onShow(() => {
  getStatisticData()
  getStatisticOrder()
  getActivityList()
})

// 标签页
const tabs = ref(Object.values(ACTIVITY_STATUS))
const handleChangeTab = (e) => {
  queryParams.value.pageNo = 1
  queryParams.value.status = e.code
  getActivityList()
}

// 搜索
const searchValue = ref('')
const searchCenter = (e) => {
  queryParams.value.pageNo = 1
  getActivityList()
}

// 获取活动列表
const moreState = ref(1)
const listData = ref([])
const queryParams = ref({
  pageNo: 1,
  pageSize: 10,
  status: '11',
  name: ''
})
const getActivityList = (() => {
  uni.stopPullDownRefresh()
  try {
    queryParams.value.supplierId = store.getters.companyId
    queryParams.value.name = searchValue.value
    activityApi.getActivityList(queryParams.value).then((res) => {
      modal.closeLoading()
      if (res.code == 0) {
        const newData = res.data && res.data.list ? res.data.list : []
        if (queryParams.value.pageNo * queryParams.value.pageSize >= res.data.total) {
          moreState.value = 3
        } else {
          moreState.value = 1
        }
        if (queryParams.value.pageNo > 1) {
          listData.value = [...listData.value, ...newData]
        } else {
          listData.value = [...newData]
        }
      } else {
        modal.msgError(res.msg)
      }
    })
  } catch(err) {
    modal.closeLoading()
  }
})

// 获取统计数据
const statisticData = ref([
  { name: '活动数量', value: 0, unit: '个' },
  { name: '活动订单', value: 0, unit: '单' },
  { name: '活动销售额', value: 0, unit: '元' }
])
const getStatisticData = () => {
  try {
    activityApi.getStatisticData(store.getters.companyId).then(res => {
      if (res.code === 0 && res.data) {
        statisticData.value[0].value = formatValue(res.data.total || 0)
        statisticData.value[0].unit = formatUnit(res.data.total || 0, '个')
      } else {
        modal.msgError('获取活动统计数据失败！')
      }
    })
  } catch(err) {
    modal.msgError('获取活动统计数据失败！')
  }
}
const getStatisticOrder = () => {
  try {
    activityApi.getStatisticOrder(store.getters.companyId).then(res => {
      if (res.code === 0 && res.data) {
        statisticData.value[1].value = formatValue(res.data.orderCount || 0)
        statisticData.value[1].unit = formatUnit(res.data.orderCount || 0, '单')
        statisticData.value[2].value = formatValue((res.data.orderPrice || 0) / 100)
        statisticData.value[2].unit = formatUnit((res.data.orderPrice || 0) / 100, '元')
      } else {
        modal.msgError('获取订单统计数据失败！')
      }
    })
  } catch(err) {
    modal.msgError('获取订单统计数据失败！')
  }
}

// 新增活动
const handleToAdd = () => {
  tab.navigateTo('/pages/activity/supplier/form')
}

// 跳转活动详情
const handleToView = (activity) => {
  tab.navigateTo(`/pages/activity/supplier/view?activityId=${activity.id}&productScope=${activity.productScope}`)
}

// 下拉刷新
onPullDownRefresh(() => {
  queryParams.value.pageNo = 1
  getActivityList()
})

// 上拉加载更多
onReachBottom(() => {
  if (moreState.value == 1) {
    modal.loading('加载中...');
    moreState.value = 2;
    queryParams.value.pageNo++
    getActivityList()
  }
})
</script>

<style lang="scss" scoped>
.page-activity-list {
  .page-search {
    position: relative;
    width: 100%;
    margin: 30rpx 0 0;

    :deep(.fui-input__wrap) {
      padding: 20rpx 24rpx !important;
    }

    span {
      position: absolute;
      z-index: 10;
      right: 0;
      top: 0;
      font-size: 1.25rem;
      color: var(--fui-color-link);
      display: inline-block;
      width: 40px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      font-size: 40rpx;
      color: var(--fui-color-link);
    }
  }

  .page-tab {
    :deep(.fui-tabs__scrollbox) {
      width: fit-content;
    }

    :deep(.fui-tabs__line-short) {
      width: 64rpx !important;
    }

    :deep(.fui-tabs__item) {
      padding-left: 5rpx;
      padding-right: 72rpx;
    }
  }

  .activity-list {
    width: 100%;
    padding: 24rpx 0;
		.activity-item {
			position: relative;
      min-height: 160rpx;
			overflow: hidden;
			border-radius: 16rpx;
			background-color: #fff;
			margin-bottom: 24rpx;
			padding: 24rpx 24rpx 24rpx 248rpx;
			.activity-image {
				position: absolute;
				top: 50%;
				left: 24rpx;
				width: 200rpx;
				height: 160rpx;
				overflow: hidden;
				border-radius: 16rpx;
				margin-top: -80rpx;
			}
			.activity-info-titile {
				margin-bottom: 10rpx;
				font-size: 26rpx;
				color: #333;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			.activity-info-subtitle {
				margin-right: 10rpx;
			}
		}
  }
}
</style>